<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="box">
        <!-- 自定义事件myEvent,事件处理程序为getData,该处理程序要在父组件中定义 -->
        <child @myevent="getData"></child>
    </div>


    <script>
        Vue.component("child", {
                template: `
                <div style="background:#ccc;color:white;">
                    子组件--  <button @click="sendData">点击传递数据给父组件</button>
                </div>
            `,
                data() {
                    return {
                        //子组件中的模型状态
                        childData: "1000000"
                    }
                },
                methods: {
                    sendData() { //点击组件中的button后，会触发该处理程序
                        //事件分发机制 this.$emit,方法可以触发组件使用时的自定义事件
                        this.$emit("myevent", this.childData);
                    }
                }
            })
            //根组件
        var vm = new Vue({
            el: "#box",
            methods: {
                //父组件中定义的方法，用于接收子组件传递过来的数据
                getData(data) {
                    //data参数保存了组件传递过来的数据
                    console.log("子组件中的数据：" + data);
                }
            }
        })
    </script>
</body>

</html>